<template>
  <el-table
    id="tablestyle"
    :header-cell-style="headFirst"
    :data="tableData"
    style="width: 100%"
    :span-method="arraySpanMethod"
    :border="true"
    :cell-class-name="tableCellClassNames"
  >
    <el-table-column align="center" prop="date" label="类别" width="180">
      <el-table-column align="center" prop="complaintType"> </el-table-column>
      <el-table-column align="center" prop="type"> </el-table-column>
    </el-table-column>
    <el-table-column prop="january" label="一月"> </el-table-column>
    <el-table-column prop="february" label="二月"> </el-table-column>
    <el-table-column prop="march" label="三月"> </el-table-column>
    <el-table-column prop="april" label="四月"> </el-table-column>
    <el-table-column prop="may" label="五月"> </el-table-column>
    <el-table-column prop="june" label="六月"> </el-table-column>
    <el-table-column prop="july" label="七月"> </el-table-column>
    <el-table-column prop="august" label="八月"> </el-table-column>
    <el-table-column prop="september" label="九月"> </el-table-column>
    <el-table-column prop="october" label="十月"> </el-table-column>
    <el-table-column prop="november" label="十一月"> </el-table-column>
    <el-table-column prop="december" label="十二月"> </el-table-column>
    <el-table-column prop="total" label="合计"> </el-table-column>
  </el-table>
</template>
  <script>
//整机接口
// import tableapi from "@/api/q1/business/dateinsert";
import tableapi from "@/api/report";
export default {
  //接收父组件的值
  // props:["father"],
  props: {
    // tableDatelist: {
    //   type: Array,
    //   default: [],
    // },
    // 接收父组件的值
    year: String,
    problemAttribution: String,
  },
  data() {
    return {
      // tableData: this.tableDatelist,
      tableData: [],
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
        tableCellClassNames({row, column, rowIndex, columnIndex}){
          //超过指定比例显示红色
      let array=[2,5,8];
      let monthchina=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
      //let month=['January','February','March','April','May','June','July','August','September','October','November','December']
      for(var i=0;i<=array.length;i++){
        //截取的下标不为-1，value大于100%，列名为一月，第三行，第二列
        if(row.january.indexOf('%')!==-1&&row.january.substring(0,row.january.indexOf('%'))>100 &&column.label==monthchina[0]&&rowIndex==array[i]&&columnIndex==2){
            return "cellNames"
          }
           if(row.february.indexOf('%')!==-1&&row.february.substring(0,row.february.indexOf('%'))>100&&column.label==monthchina[1]&&rowIndex==array[i]&&columnIndex==3){
            return "cellNames"
          }
           if(row.march.indexOf('%')!==-1&&row.march.substring(0,row.march.indexOf('%')) >100&&column.label==monthchina[2]&&rowIndex==array[i]&&columnIndex==4){
            return "cellNames"
          }
           if(row.april.indexOf('%')!==-1&&row.april.substring(0,row.april.indexOf('%'))>100&&column.label==monthchina[3]&&rowIndex==array[i]&&columnIndex==5){
            return "cellNames"
          }
           if(row.may.indexOf('%')!==-1&&row.may.substring(0,row.may.indexOf('%'))>100 &&column.label==monthchina[4]&&rowIndex==array[i]&&columnIndex==6){
            return "cellNames"
          }
           if(row.june.indexOf('%')!==-1&&row.june.substring(0,row.june.indexOf('%'))>100 &&column.label==monthchina[5]&&rowIndex==array[i]&&columnIndex==7){
            return "cellNames"
          }
           if(row.july.indexOf('%')!==-1&&row.july.substring(0,row.july.indexOf('%'))>1 &&column.label==monthchina[6]&&rowIndex==array[i]&&columnIndex==8){
            return "cellNames"
          }
           if(row.august.indexOf('%')!==-1&&row.august.substring(0,row.august.indexOf('%'))>100 &&column.label==monthchina[7]&&rowIndex==array[i]&&columnIndex==9){
            return "cellNames"
          }
           if(row.september.indexOf('%')!==-1&&row.september.substring(0,row.september.indexOf('%'))>100&&column.label==monthchina[8]&&rowIndex==array[i]&&columnIndex==10){
            return "cellNames"
          } if(row.october.indexOf('%')!==-1&&row.october.substring(0,row.october.indexOf('%'))>100 &&column.label==monthchina[9]&&rowIndex==array[i]&&columnIndex==11){
            return "cellNames"
          }
           if(row.november.indexOf('%')!==-1&&row.november.substring(0,row.november.indexOf('%'))>100 &&column.label==monthchina[10]&&rowIndex==array[i]&&columnIndex==12){
            return "cellNames"
          }
           if(row.december.indexOf('%')!==-1&&row.december.substring(0,row.december.indexOf('%'))>100 &&column.label==monthchina[11]&&rowIndex==array[i]&&columnIndex==13){
            return "cellNames"
          }
      }
    },
    //初始化table数据
    init(year,problemAttribution) {
      console.log(year);
      console.log(problemAttribution);
      var year=this.year;
      var problemAttribution=this.problemAttribution;
      tableapi.getTable(year, problemAttribution).then((res) => {
        console.log("++++++++++++++++++++++")
        console.log(res)
        //声名一个新的数据对象
          let dataWithAmountAsString = res.map(item => ({  
  ...item, // 复制原始对象的其余属性  
  january: item.january.toString(),// 将 January 属性转换为字符串  
  february: item.february.toString(),
  march: item.march.toString(),
  april: item.april.toString(),
  may: item.may.toString(),
  june: item.june.toString(),
  july: item.july.toString(),
  august: item.august.toString(),
  september: item.september.toString(),
  october: item.october.toString(),
  november: item.november.toString(),
  december: item.december.toString(),
}));  
          this.tableData = dataWithAmountAsString;  
          console.log(this.tableData);
      }).catch(()=>{
        this.tableData =[];
      });
      //this.tableData=this.tableDatelist;
      //2024-09-04
      //获取选择的年份数据
      // 调用获取table接口
      //把数据源赋值给tableData
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      //   return [1, 2];
      // } else if (columnIndex === 1) {
      //   return [0, 0];
      // }

      if (columnIndex === 0) {
        //第一行或者能被三整除的行进行合并行
        if (rowIndex == 0 || rowIndex % 3 == 0) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },

    headFirst({ row, colunm, rowIndex, columnIndex }) {
      if (rowIndex === 1) {
        //这里为了是将第二列的表头隐藏，就形成了合并表头的效果
        return { display: "none" };
      }
      return "background:#f5f7fa";
    },
  },
};
</script>
<style >
#heard {
  padding-top: 15px;
}
.cellNames{
 /* background:red!important; */
 color:red
}
</style>